<template>
	<view v-if="value">
		<view class="popup">
			<view class="popup-mask" @click="close"></view>
			<view :class="['popup-content', positionClass]" @click="handleClick" @touchmove="handleTouchMove">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		model: {
			prop: 'value',

		},
		props: {
			value: {
				type: Boolean,
				default: false
			},
			position: {
				type: String,
				default: "center" // 默认居中
			}
		},
		methods: {
			handleClick(event) {
				event.stopPropagation();
			},
			close() { 
				this.$emit("input", false);
			},
			handleTouchMove(event) {
				event.stopPropagation(); // 阻止事件冒泡
			}
		},
		computed: {
			positionClass() {
				switch (this.position) {
					case "top":
						return "popup-content-top";
					case "bottom":
						return "popup-content-bottom";
					case "left":
						return "popup-content-left";
					case "right":
						return "popup-content-right";
					default:
						return "popup-content-center";
				}
			}
		}
	};
</script>

<style>
	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: var(--date-z-index);
	}

	.popup-content {
		position: fixed;
		background-color: #fff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
		max-width: 80%;
		max-height: 99vh;
		min-width: 90%;
		overflow: scroll;
		z-index: var(--date-z-index);
	}

	.popup-content-center {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.popup-content-top {
		top: var(--my-nav-h);
		left: 50%;
		transform: translateX(-50%);
	}

	.popup-content-bottom {
		bottom: var(--my-tab-safe-area);
		left: 50%;
		transform: translateX(-50%);
	}

	.popup-content-left {
		top: 50%;
		left: 20px;
		transform: translateY(-50%);
	}

	.popup-content-right {
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
	}
</style>